.t-index-carousel {
    margin-top: 15px;
    box-shadow: $box-shadow-sm;

    .t-index-carousel-title {
        background-color: #ffffffaa;
        position: absolute;
        bottom: 3.5rem;
        padding: 0 1rem 0.75rem;
        width: 100%;
    }

    .t-index-carousel-title:hover {
        background-color: #ffffffdd;
    }
}

.t-index-right {
    z-index: 1021;
    margin: -1px 0;
    padding: 0;
    position: sticky;
    top: 0;
}

@media screen and (min-width: 768px) {
    .t-index-right {
        height: 100vh;
    }
}

.t-index-intro {
    height: 100%;
    background-color: $white;
    box-shadow: 0 0.25rem 0.25rem rgba($black, 0.075);
    display: flex;
    flex-direction: column;

    .t-index-avatar {
        height: 128px;
        display: flex;
        align-items: center;

        img {
            width: 60px;
            height: 60px;
        }
    }

    .t-index-social {
        background-color: $dark;
        height: calc(100% - 128px);
        color: $white;
        font-size: $font-size-sm * 0.9;

        .icon {
            margin-right: 0.125rem;
            font-size: $h3-font-size;
        }

        a {
            color: $white;
        }

        a:hover {
            filter: brightness(120%);
        }

        .miitbeian {
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
        }

        .icon-miitbeian {
            font-size: $font-size-sm;
        }
    }
}
